<style lang="less" scoped>
    .container {
        position: absolute;
        top: .88rem;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* 保持滚动流畅 */
        .type_ls {
            padding-left: .3rem;
            background-color: #fff;
            li {
                height: 1.5rem;
                display: flex;
                align-items: center;
                border-bottom: .01rem solid #dedede;
                position: relative;
                .icon_pic {
                    flex: 0 0 .9rem;
                    height: .9rem;
                    margin-right: .32rem;
                }
                .cont {
                    flex: 1;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    padding-right: .3rem;
                    .tit_date {
                        display: flex;
                        justify-content: space-between;
                        .tit {
                            font-size: .32rem;
                            color: #333;
                        }
                        .date {
                            font-size: .24rem;
                            color: #999;
                        }
                    }
                    .con {
                        font-size: .26rem;
                        color: #999;
                        margin-top: .16rem;
                    }
                }
            }
        }
    }

    .icon {
        position: absolute;
        right: 0.3rem;
        bottom: 20%;
    }
</style>

<template>
    <div class="notification_box">
        <v-header title="消息通知">
            <div slot="left" class="backs_icon"></div>
            <!--<span slot="left" :class="scrollTop>25 ? back_icon : white_back_icon"></span>-->
            <!-- <span slot="right" :class="scrollTop>25 ? share_icon : white_share_icon"></span> -->
        </v-header>

        <div class="container" :style="{top: interactive.statusBarHeight.height}">
            <ul class="type_ls">
                <li @click="clearIndex(3,'公告消息')">    <!--TODO 从最后拉上来-->
                    <img class="icon_pic" src="../../assets/img/notice.png">
                    <div class="cont">
                        <div class="tit_date">
                            <span class="tit">公告消息</span>
                            <span class="date">{{time}}</span>
                        </div>
                        <span class="con">{{content}}</span>
                        <badge v-show="index3>0" :text="index3" class="icon"></badge>
                    </div>
                </li>
                <li @click="clearIndex(0,'系统消息')">
                    <img class="icon_pic" src="../../assets/img/icon_msg.png">
                    <div class="cont">
                        <div class="tit_date">
                            <span class="tit">系统消息</span>
                            <span class="date">{{time}}</span>
                        </div>
                        <span class="con">{{content}}</span>
                        <badge v-show="index>0" :text="index" class="icon"></badge>
                    </div>
                </li>
                <li @click="clearIndex(1,'交易消息')">
                    <img class="icon_pic" src="../../assets/img/broadcast.png">
                    <div class="cont">
                        <div class="tit_date">
                            <span class="tit">交易消息</span>
                            <span class="date">{{time1}}</span>
                        </div>
                        <span class="con">{{content1}}</span>
                        <badge v-show="index1>0" :text="index1" class="icon"></badge>
                    </div>
                </li>
                <li @click="clearIndex(2, '订单消息')">
                    <img class="icon_pic" src="../../assets/img/icon_call.png">
                    <div class="cont">
                        <div class="tit_date">
                            <span class="tit">订单消息</span>
                            <span class="date">{{time2}}</span>
                        </div>
                        <span class="con">{{content2}}</span>
                        <badge v-show="index2>0" :text="index2" class="icon"></badge>
                    </div>
                </li>
                <li @click="">
                    <img class="icon_pic" src="../../assets/img/service_news_icon@2x.png">
                    <div class="cont">
                        <div class="tit_date">
                            <span class="tit">联系客服</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import {mapActions, mapState} from 'vuex'
    import {UPDATA_MWSSAGENOTIFY} from 'store/interactive'
    import {Badge} from 'vux'

    export default {
        components: {
            Badge,
        },
        data() {
            return {
                scrollTop: 26,
                header_white: "header_white",
                header: "header",
                back_icon: "back_icon",
                white_back_icon: "white_back_icon",
                white_share_icon: "white_share_icon",
                share_icon: "share_icon",
                index: 0, //系统消息
                index1: 0, //交易消息
                index2: 0, //订单消息
                index3: 0, //公告消息
                content: '',
                content1: '',
                content2: '',
                content3: '',
                time: '',
                time1: '',
                time2: '',
                time3: '',
            }
        },
        activated() {
            this.updaDate();
        },
        methods: {
            ...mapActions([UPDATA_MWSSAGENOTIFY]),
            updaDate() {
                let that = this;
                that.index = 0;
                that.index1 = 0;
                that.index2 = 0;
                that.index3 = 0;
                that.content = '';
                that.content1 = '';
                that.content2 = '';
                that.content3 = '';
                that.time = '';
                that.time1 = '';
                that.time2 = '';
                that.time3 = '';
                this.interactive.jpushMessageNotify.arr.forEach(function (v, i) {
                    if (v.type == 10000) {
                        that.index++;
                        that.content = v.content;
                        that.time = v.pushTime;
                    }
                    if (v.type == 20000) {
                        that.index1++;
                        that.content1 = v.content;
                        that.time1 = v.pushTime;
                    }
                    if (v.type == 30000) {
                        that.index2++;
                        that.content2 = v.content;
                        that.time2 = v.pushTime;
                    }
                    if (v.type == 50000) {
                        that.index3++;
                        that.content3 = v.content;
                        that.time3 = v.pushTime;
                    }
                })
            },
            clearIndex(type, title) {
                this.UPDATA_MWSSAGENOTIFY(type);
                let msgType;
                if (type == 0) {
                    this.index = 0;
                    msgType = 10000
                } else if (type == 1) {
                    this.index1 = 0;
                    msgType = 20000
                } else if (type == 2) {
                    this.index2 = 0;
                    msgType = 30000
                }else if (type == 3) {
                    this.index3 = 0;
                    msgType = 50000
                }
                this.$router.push({path:'/home/notice',query:{type:msgType,title: title}})
                 //TODO ylb  等待消息列表接口
            },
            gotoSession() {
                if (!this.comJS.getCookie('t')) {
                    this.Interactive.pushTokentoJS();
                } else {
                    this.qiyuIOSAndAndroid()
                }
            },
            qiyuIOSAndAndroid() {
                let that = this;
                let name = '匿名用户';
                if (this.user.nickname) {
                    name = that.user.nickname
                } else if (this.user.name) {
                    name = that.user.name
                }
                this.Interactive.openServiceChat(
                    {
                        entrance: "我的",
                        name: name,
                        mobile: that.user.mobileNo,
                        gender: that.user.gender == 0 ? "未知" : that.user.gender == 1 ? "男" : "女",
                        orderId: '',
                        avatar: that.user.headImgUrl && that.user.headImgUrl != null ? that.user.headImgUrl : "https://files.shbs008.com/images/headImg/defaultHeadImg.png",
                        groupId: '1163250'
                    })
            },
        },
        watch: {
            'interactive.jpushMessageNotify': function () {
                this.updaDate();
            }
        },
        computed: mapState({interactive: state => state.interactive,user: state => state.user}),
    }
</script>
